<!-- 普查采集入库情况 -->
<template>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane v-for="(item,index) in auditType" :key="index" :label="item.label" :name="item.value" />
    </el-tabs>
    <div class="survey">
        <div class="survey-item" @click="getDetails" :class="showCursor ? 'showCursor':''">
            <img src="@/assets/images/housing/pc_area.png" alt="">
            <span>{{ infos.area }}</span>(万平方米)
        </div>
        <div class="survey-item" @click="getDetails" :class="showCursor ? 'showCursor':''">
            <img src="@/assets/images/housing/pc_num.png" alt="">
            <span>{{ infos.dong }}</span>(栋)
        </div>
    </div>
</template>
<script setup>
import { getGeneralSituation } from '@/api/housingFacilities.js';
const emit = defineEmits(['getDetails']);
const props = defineProps({
    showCursor: Boolean,
})
const data = reactive({
    activeName: 'all',//统计审核状态,默认显示全部
    infos: {},
    all: {},
    check: {},
})
const { activeName, infos, all, check } = toRefs(data)
const auditType = [{label: '全部', value: 'all'}, {label:'已审核', value:'audited'}]
function handleClick(tab){
    if(tab.props.name == 'all'){
        infos.value = all.value
    }else{
        infos.value = check.value
    }
}
function getData() {
    getGeneralSituation().then((res) => {
        infos.value = res.data.all[0]
        all.value = res.data.all[0]
        check.value = res.data.check[0]
    });
}

// 挂载完成
onMounted(() => {
    getData();
})

// 跳转到详情页
const getDetails = (val) => {
	emit("getDetails", val);
}
</script>
<style lang='scss' scoped>
.el-tabs{
    position: absolute;
    top: -70px !important;
    right: 0;
}
.survey{
    width: 440px;
    margin: -50px auto 20px;
    display: flex;
    justify-content: space-around;
    &-item{
        width: 210px;
        height: 200px;
        background: rgba(0,0,0,0.25);
        background-image: url('@/assets/images/disaterLosses/bg.png');
        background-size: 100% 100%;
        padding-top: 16px;
        box-sizing: border-box;
        color: #fff;
        font-size: 14px;
        text-align: center;
        // cursor: pointer;
        
        img{
            display: block;
            margin: 0 auto 10px;
            width: 109px;
            height: 109px;
        }
        span{
            display: block;
            font-size: 24px;
            color: #1A76FF;
        }
        &:last-child{
            span{
                color: #46FFFF;
            }
        }
    }
}
</style>